<template>
  <n-card :bordered="false" class="proCard">
    <div>
      <QueryForm :init-query="initQuery" v-model:value="queryForm" :more-btn="false" @submit="reloadTable">
        <template #default="{ queryForm }">
          <QueryItem
            :query-form="queryForm"
            :options-map="optionsMap"
            :table-columns="queryItems.default"
          ></QueryItem>
        </template>

      </QueryForm>
    </div>
    <BasicTable :columns="tableColumns" :request="loadDataTable" :row-key="(row) => row.id" ref="tableRef"
      @update:checked-row-keys="onCheckedRowEvent" :scroll-x="1090">
      <template #tableTitle>
        <n-space>
          <n-button  v-authd="AuthCodes['岗位管理新增']" type="primary" :disabled="!vCtl.addBtn" @click="doSaveModal()">
            新建
          </n-button>
          <!-- <n-button  v-authd="AuthCodes['岗位管理编辑']" type="warning" :disabled="!vCtl.updateBtn" @click="doUpdateModal()">
            编辑
          </n-button> -->
          <n-button  v-authd="AuthCodes['岗位管理删除']" type="error" :disabled="!vCtl.delBtn" @click="doDeleteModal()">
            删除
          </n-button>
        </n-space>
      </template>
      <template #toolbar>
      </template>
    </BasicTable>

  </n-card>
</template>

<script lang="ts">
import { defineComponent, ref, watch, computed } from "vue";
import { BasicTable, QueryForm, QueryItem } from "slash-admin";
import httpApi, { selectPageList } from "./httpApi";
import {
  checkedRows,
  doDeleteModal,
  doSaveModal,
  doUpdateModal,
  enabledOptions,
  initQuery,
  onCheckedRowEvent,
  queryForm,
  reloadTable,
  vCtl,
  tableColumns,
  tableRef
} from "./Service";
import { AuthCodes } from "@/apis/auth-code";
import { getOptionsMap } from "./options";

export default defineComponent(
  {
    components: { BasicTable, QueryForm, QueryItem },
    props: {
      queryFormValue: {
        type: [Object],
        default: () => {
          return {
          };
        }
      }
    },
    setup(props, ctx) {
      queryForm.value = Object.assign(queryForm.value, props.queryFormValue);
      const optionsMap = getOptionsMap();
      const queryItems = computed(() => {
        const result: { default: MyTableBasicColumn[]; more: MyTableBasicColumn[] } = {
          default: [],
          more: [],
        };
        tableColumns.forEach((item) => {
          if (item.searchProps) {
            if (item.searchProps.more) {
              result.more.push(item);
            } else {
              result.default.push(item);
            }
          }
        });

        return result;
      });
      const loadDataTable = async (res) => {
        console.log("更新", checkedRows.value);
        return await httpApi.selectPageList({
          searchKey: null,
          ...res,
          ...queryForm.value
        });
      };
      watch(props.queryFormValue, () => {
        queryForm.value = Object.assign(queryForm.value, props.queryFormValue);
        console.log("更新完成")
      });
      return {
        loadDataTable,
        reloadTable,
        tableColumns,
        vCtl,
        onCheckedRowEvent,
        enabledOptions,
        queryForm,
        tableRef,
        initQuery,
        doSaveModal,
        doUpdateModal,
        doDeleteModal,
        AuthCodes,
        optionsMap,
        queryItems
      };
    }
  }
);


</script>

<style lang="less" scoped>
:deep(.n-select) {
  width: 150px;
}
</style>
